import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {PropsType} from './DetailWhat';

interface WhenPropsType extends PropsType {
  location?: string;
  locationDetail?: string;
}
export default function DetailWhen(props: WhenPropsType) {
  return (
    <View style={props.style}>
      <View style={headerStyles.headerContainer}>
        <View style={headerStyles.headerLineVer}></View>
        <Text style={headerStyles.headerText}>Where</Text>
      </View>
      <View style={whereStyles.whereContainer}>
        <View>
          <Text style={whereStyles.location}>{props.location}</Text>

          <Text style={whereStyles.locationDetail}>{props.locationDetail}</Text>
        </View>
      </View>
    </View>
  );
}
const headerStyles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerLineVer: {
    backgroundColor: '#8560A9',
    width: 4,
    height: 18,
  },
  headerText: {
    paddingLeft: 4,
    color: '#8560A9',
    fontSize: 16,
    fontWeight: '500',
  },
});
const whereStyles = StyleSheet.create({
  whereContainer: {
    marginTop: 8,
    flexDirection: 'row',
  },
  location: {
    fontSize: 14,
    color: '#67616D',
  },
  locationDetail: {
    fontSize: 12,
    color: '#67616D',
  },
});
